這篇要做的:把訂單日期改用 jQuery UI DatePicker + vue component !
把 jQuery UI DatePicker 放在這個 component 內 !
const jquery_ui_date_picker = {
template: `
<input type="text"
v-bind:id="id"
v-model="dom_value" />
`,
props: {
id: String,
date_format: String,
modelValue: String,
},
setup(props, {emit}) {
let dom = null;
onMounted(() => {
dom = $("#"+ props.id);
dom.datepicker({
dateFormat: props.date_format || "yy-mm-dd",
onClose : function (dateText, inst) {
dom_value.value = dateText;
}
});
})
const dom_value = computed({
get: () => {
return props.modelValue?.split('T')[0];
},
set: (v) => {
if (v === "")
{
v = null;
}
emit('update:modelValue', v);
},
});
return {
dom_value,
}
},
}
引用上述 component
原本 vue 指定 mount 的地方上面加上 js script 的引用
</script>
<script src="/lib/jquery-ui-select-menu.js?20210608001"></script>
<script src="/lib/jquery-ui-date-picker.js?20210608001"></script>
<script>
app.component("jquery-ui-select-menu", jquery_ui_select_menu);
app.component("jquery-ui-date-picker", jquery_ui_date_picker);
const vm = app.mount('#app');
</script>
把訂單日期改為以下語法
<jquery-ui-date-picker
v-model="vue_model.OrderDate"
v-bind:id="'OrderDate'"
v-bind:date_format="'yy-mm-dd'"
></jquery-ui-date-picker>
vue
const calculate = function () {
CustomFetch.PostJson(calculate_url, vue_model.value)
.then(data => vue_model.value = data);
}
const submit_form = function() {
CustomFetch.PostJson(post_url, vue_model.value)
.then(data => vue_model.value = data);
}
這篇先到這裡,下一篇來看看 下拉選單連動 + jQuery UI Selectmenu !